// Load the module

import React, {forwardRef, useRef} from 'react';
import {StyleSheet, ViewStyle} from 'react-native';
import Video from 'react-native-video';
// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

interface defineProps {
  url?: string;
  styles: ViewStyle;
}
const VideoPlayer = forwardRef((props: defineProps, ref) => {
  const videoRef = useRef<Video>(null);
  return (
    <Video
      // Can be a URL or a local file.
      // Store reference
      ref={videoRef}
      source={{uri: props.url}}
      // Callback when remote video is buffering
      style={props.styles}
      resizeMode="cover"
      controls
      hideShutterView
    />
  );
});

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    backgroundColor: 'black',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    width: 200,
    height: 200,
  },
});
export default VideoPlayer;
